/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-07-21 08:59:12
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-07-21 09:12:33
 * @FilePath: \creation\5_creation\app\src\router\RouterView.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component, Suspense } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import { RouterViewProps, RouterItem } from '../type/router'

type Props = {}

type State = {}

// 6.完成动态路由表的搭建
class RouterView extends Component<Props & RouterViewProps, State> {
    state = {}

    render() {
        let { routes = [] } = this.props
        return (
            // 白屏优化
            <Suspense fallback={'路由加载中，请稍后'}>
                <Switch>
                    {
                        routes && routes.map((item: RouterItem, index: number) => {
                            return <Route key={index} path={item.path} render={(props) => {
                                return item.redirect ? <Redirect to={item.redirect}></Redirect>
                                    : <item.component {...props} routes={item.children}></item.component>
                            }}></Route>
                        })
                    }
                </Switch>
            </Suspense>
        )
    }
}

export default RouterView